import React, { useEffect } from 'react';
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

export default function Yonghuzaixia() {
  useEffect(() => {
    const chartDom = document.getElementById('Yonghuzaixia');
    const myChart = echarts.init(chartDom);
    

    const option = {
      title: {
        text: '转化率',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['App', '小程序', '网站', ],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'App',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: '小程序',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: '网站',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        
      ],
    };

    option && myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  }, []);
  return (
    <div style={{ textAlign: 'center', height: '2.5rem', width: '100%' }}>
      <div id="Yonghuzaixia" style={{ height: '100%', width: '100%' }}></div>
    </div>
  );
}
